<template>
  <div id="app" class="app abs flex-column" @drop="$util.preventEvent" @dragover="$util.preventEvent">
    <!-- <SVGBack  /> -->

    <DocManage ref="docManage" class="abs" @setDoc="setApiDoc" @importDoc="visibleApiImport = true">
      <!-- :style="apiDoc ? 'transform: scale(.9);opacity: .8;' : 'transform: scale(1);opacity:1;'" -->
    </DocManage>

    <mask-view v-if="apiDoc">
      <ApiDoc
        class="abs "
        :class="apiDocAnim.dur"
        :style1="apiDocAnim.end ? apiDocAnim.end : apiDocAnim.start"
        ref="apiDoc"
        :apiDoc="apiDoc"
        @close="setApiDoc()"
        @setDesign="setApiDoc"
      >
        <template #action>
          <span class="flex-row-center">
            <span class="btn-text" @click="visibleApiImport = true"> <Icon type="download" />导入 </span>
            <span class="btn-text" @click="visibleApiExport = true"> <Icon type="upload" />导出 </span>
          </span>
        </template>
      </ApiDoc>
    </mask-view>
    <!-- v-if="apiDoc" -->
    <!-- <transition name="api-doc-anim"> </transition> -->

    <!-- <div class="content flex-row"> </div> -->
    <transition name="anim-loading">
      <ApiImport v-if="visibleApiImport" @ok="apiImport" @close="() => (visibleApiImport = false)"></ApiImport>
    </transition>
    <transition name="anim-loading">
      <ApiExport v-if="visibleApiExport" @ok="apiExport" @close="() => (visibleApiExport = false)"></ApiExport>
    </transition>
  </div>
</template>
<script>
import DocManage from "@/views/DocManage.vue";
import ApiDoc from "@/views/ApiDoc/ApiDoc";

import ApiImport from "@/views/ApiImport";
import ApiExport from "@/views/ApiExport";

export const components = {
  DocManage,
  ApiDoc,
  ApiImport,
  ApiExport
};
let cmpt = {
  components,
  data() {
    return {
      apiDoc: null,
      apiDocAnim: { start: `transform:scale(0);`, end: null, dur: "anim-dur-0" },
      visibleApiImport: false,
      visibleApiExport: false
    };
  },
  mounted() {
    this.getApiDoc();
    window.addEventListener("hashchange", this.hashchange);
  },
  beforeUnmount() {
    window.removeEventListener("hashchange", this.hashchange);
  },
  methods: {
    apiImport(apiDoc) {
      if (apiDoc) {
        this.visibleApiImport = false;
        this.setApiDoc(apiDoc);
      }
    },
    apiExport(mode) {
      window.apiExport(this.apiDoc, mode, () => {
        this.visibleApiExport = false;
      });
    },
    hashchange(ev) {
      // console.log("5555555555555", location.hash);
      // if (this.apiDoc && location.hash != "#?doc=" + this.apiDoc.name) {
      //   this.getApiDoc();
      // }
      this.getApiDoc();
    },

    updateDocManage() {
      if (!this.apiDoc) {
        this.$refs.docManage && this.$refs.docManage.search();
      }
    },
    setApiDoc(doc) {
      // console.log(doc)
      // if (doc) {
      //   let event = window.event || {};
      //   let left = event.pageX || 0;
      //   let top = event.pageY || 0; //默认鼠标坐标

      //   let evPath = event.path || [];
      //   let card = evPath.find((item) => item.classList && item.classList.contains("doc-card"));
      //   let rect = card.getBoundingClientRect();
      //   left = rect.left + rect.width / 2;
      //   top = rect.top + rect.height / 2;

      //   console.log("[setApiDoc]", doc, window.event.pageY, evPath, card, rect);
      //   this.apiDocAnim = {
      //     start: `transform-origin:${left}px ${top}px;transform:scale(0);opacity: .5;pointer-events: none;`,
      //     end: null,
      //     dur: "anim-dur-0"
      //   };
      //   this.$nextTick(() => {
      //     this.apiDocAnim.dur = "anim-dur";
      //     this.apiDocAnim.end = `transform-origin:${left}px ${top}px;transform:scale(1);opacity: 1;pointer-events: all;`;
      //   });
      // }
      // if (!doc) {
      //   this.apiDocAnim.end = null;
      // }
      this.apiDoc = doc;
      this.updateDocManage();
      // if (doc && doc.name) {
      //   location.hash = "?doc=" + doc.name;
      // }
    },
    getDocNameFromUrl() {
      let docName = null;
      try {
        let url = new URL(location.href);
        url.search = (url.hash || "").replace("#", "");
        docName = url.searchParams.get("doc");
      } catch (e) {}
      return docName;
    },
    getApiDoc() {
      let docName = this.getDocNameFromUrl();
      if (docName) {
        this.$api("doc.find", { name: docName }).then((result = {}) => {
          console.log("[getApiDoc]", result);
          this.setApiDoc(result.data || window.apiDoc);
        });
      } else {
        this.setApiDoc(window.apiDoc || {});
      }
    }
  }
};
export default cmpt;
</script>
<style>
.anim-dur-0 {
  transition: transform 0s, opacity 0s;
}
.anim-dur {
  transition: transform 0.35s, opacity 0.35s;
  transition-timing-function: ease-out;
}
.api-doc-anim {
  /* left: 0;
  top: 0px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); */
  opacity: 1;
}

.api-doc-anim-enter,
.api-doc-anim-leave-to {
  opacity: 0.5;
}
</style>
<style src="./App.css"></style>
